<template>
	<view class="percentloop" v-if="showPersent">
		<view class="percentloop">
		  <view class="circle-left">
			<view :style="{ transform: 'rotate(' + transformLeft + 'deg)' }"></view>
			{{ transformLeft }}
		  </view>
		  <view class="circle-right">
			<view :style="{ transform: 'rotate(' + transformRight + 'deg)' }"></view>
		  </view>
		  <view class="number">
			{{ percentNum }} %
		  </view>
		</view>
	  </view>

</template>

<script>
	import uCharts from '@/common/charts.js';
export default {

props: {
    percentNum: {
      type: [String, Number],
      default: 0
    },
    showPersent: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    transformLeft() {
      let deg = 0
      if (this.percentNum >= 100) {
        deg = 180
      } else if (this.percentNum >= 50) {
        deg = parseInt(360 * this.percentNum / 100) - 180
      }
      return deg
    },
    transformRight() {
      let deg = 0
      if (this.percentNum >= 50) {
        deg = 180
      } else {
        deg = parseInt(360 * this.percentNum / 100)
      }
      return deg
    }
  },
  data() {
    return {
       opts: {
       
      }
    };
  },

  methods: {
   
  }
};
</script>

<style scoped lang="scss">
.percentloop {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: space-between;
 
  .percentloop {
    width:  200rpx;
    height: 200rpx;
    border-radius: 50%;
    overflow: hidden;
    margin: calc(50% - 200rpx) calc(50% - 100rpx);
 
    .circle-left,
    .circle-right {
      position: absolute;
      top: 0;
      left: 0;
      width: 60%;
      height: 100%;
      background: red;
      overflow: hidden;
 
      & > view {
        width: 100%;
        height: 100%;
        background-color: #e6e6e6;
        transform-origin: right center;
        transition: all .5s linear;
 
      }
    }
 
    .circle-right {
      left: 50%;
       background: red;
      &>view {
        transform-origin: left center;
      }
    }
 
    .number {
      position: absolute;
      top: 9%;
      bottom: 9%;
      left: 9%;
      right: 9%;
      background-color: #fff;
      border-radius: 50%;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #000;
    }
  }
  
  }

</style>